<template>
	<div class="app-list">
		<van-pull-refresh
			id="list"
			v-model="loading"
			@refresh="init"
			:loosing-text="$t('pages.home.releaseToRefresh', '释放即可刷新...')"
			:loading-text="$t('pages.home.loading', '加载中...')"
			:pulling-text="$t('pages.home.pullDownRefresh', '下拉即可刷新...')"
		>
			<CardFrame
				:title="$t('pages.home.recentlyUsed', '最近使用')"
				:recentList="recentList"
				v-if="recentList?.length > 0 && !loading"
			/>
			<CardFrame
				ref="allPart"
				:appList="appList"
				:isLoadingIndex="isLoadingIndex"
				@scrollToPart="scrollToPart"
				@loadAll="loadAll"
				@init="init"
				v-if="appList?.length > 0 && !loading"
			/>
			<div
				class="app-list-no-more-img"
				v-if="appList?.length === 0 && recentList?.length === 0 && !loading"
			>
				<img src="./images/app_list_no_more.svg" />
				<p>{{ $t('pages.home.noHaveApp', '您暂无可用应用') }}</p>
			</div>
			<p class="app-list-no-more" v-show="!loading">
				{{ $t('pages.home.noMore', '没有更多了') }}
			</p>
		</van-pull-refresh>
	</div>
</template>
<script setup lang="ts">
import CardFrame from '@/entry_mobile/components/CardFrame/index.vue'
import { onMounted, ref } from 'vue'
import { apiInit } from '@/services'
// import { t } from '@/entry_mobile/locales/index'
import { i18n } from '@/locales'
const { $t } = i18n
import { showFailToast } from 'vant'
import { isMoreTabs } from '@/utils/common'
const loading = ref(false)
const isLoadingIndex = ref(-1)
const appList: any = ref([])
const recentList: any = ref([])
const api = apiInit()
const scrollToPart = (distance: number) => {
	document.getElementById('list')?.scrollTo({
		top: distance - 46,
		behavior: 'instant',
	})
}
const loadAll = async (groupId: string, index: number) => {
	isLoadingIndex.value = index
	let res = await api.default.ListAppPrivateV2POST({
		payload: {
			group_id: groupId,
			keyword: '',
			enable_multiple_tab: isMoreTabs(),
		},
	})
	if (res.code === '000000') {
		appList.value[index] = (res.data as any)[0]
	} else {
		showFailToast('接口出错了')
	}
	isLoadingIndex.value = -1
}
const init = async () => {
	loading.value = true
	let recentRes, appRes
	;[recentRes, appRes] = await Promise.all([
		api.default.ListRecentPrivateV2POST({
			query: {
				enableMultipleTab: isMoreTabs(),
			},
		}),
		api.default.GroupListAppPrivateV2POST({
			payload: {
				keyword: '',
			},
		}),
	])
	if (appRes.code === '000000') {
		appList.value = appRes.data
	} else {
		showFailToast('接口出错了')
	}
	if (recentRes.code === '000000') {
		recentList.value = recentRes.data
	} else {
		showFailToast('接口出错了')
	}
	loading.value = false
}
onMounted(() => {
	init()
})
</script>

<style lang="less" scoped>
.app-list {
	width: 100%;
	height: 100%;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	overflow: hidden;
	scroll-behavior: smooth;
	&-no-more {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 18px;
		color: #bbbfc4;
		height: 20%;
		padding-top: 10px;
		text-align: center;
	}
	.app-list-no-more-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		img {
			margin-top: 130px;
		}
		p {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			text-align: center;
			color: #8f959e;
			margin-top: -30px;
		}
	}
}
.van-pull-refresh {
	height: 100%;
	overflow-y: scroll;
	&::-webkit-scrollbar {
		display: none;
	}
}
</style>
